<template>
  <div>
    <van-address-edit
      :area-list="areaList"
      :show-delete="!!$route.query.id"
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      :address-info="defaultInfo"
    >
      <div class="labelBox">
        <label for=""
          ><input
            type="radio"
            name="label"
            value="家"
            v-model="label"
          />家</label
        >
        <label for=""
          ><input
            type="radio"
            name="label"
            value="学校"
            v-model="label"
          />学校</label
        >
        <label for=""
          ><input
            type="radio"
            name="label"
            value="公司"
            v-model="label"
          />公司</label
        >
      </div>
    </van-address-edit>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { reqAddressadd, reqAddresslist ,reqAddressedit,reqAddressremove} from "../../http/http";
export default {
  mounted() {
    if (this.$route.query.id) {
      this.getAddressDetail();
    }
  },
  data() {
    return {
      areaList,
      //初始信息，添加没有
      defaultInfo: {},
      label: "",
    };
  },
  methods: {
    //修改时，请求地址详情
    async getAddressDetail() {
      let { uid } = JSON.parse(localStorage.getItem("isLogin"));
      let { data: res } = await reqAddresslist({
        uid,
        id: this.$route.query.id,
      });
      if (res.code == 200) {
        let info = res.list[0];
        this.defaultInfo = {
          id: info.id,
          name: info.username,
          tel: info.userphone,
          addressDetail: info.useraddress,
          areaCode: info.regioncode,
          isDefault: info.status == 1,
        };
        this.label = info.label;
      }
    },
    async onSave(content) {
      let { uid } = JSON.parse(localStorage.getItem("isLogin"));
      let {
        addressDetail: useraddress,
        areaCode: regioncode,
        city,
        county,
        isDefault,
        name: username,
        province,
        tel: userphone,
      } = content;
      let location = province + city + county;
      let status = isDefault ? 1 : 0;

      if (this.$route.query.id) {
        //编辑时逻辑
        let { data: res } = await reqAddressedit({
          id:this.$route.query.id,
          username,
          userphone,
          regioncode,
          location,
          useraddress,
          status,
          label: this.label,
        });
        if (res.code == 200) {
          this.$router.replace("/aList");
        }
      } else {
        //新增时的逻辑
        let { data: res } = await reqAddressadd({
          uid,
          username,
          userphone,
          regioncode,
          location,
          useraddress,
          status,
          label: this.label,
        });
        if (res.code == 200) {
          this.$router.replace("/aList");
        }
      }
    },
    async onDelete() {
      let {data:res} = await reqAddressremove({id:this.$route.query.id});
       if (res.code == 200) {
          this.$router.replace("/aList");
        }
    },
  },
};
</script>

<style lang="less" scoped>
.labelBox {
  text-align: center;
  input {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }
  label {
    padding: 0 20px;
  }
}
</style>